<template>
    <div class="Bread">
  <Bread></Bread>
  </div>
    <el-card>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="200px" class="demo-ruleForm" status-icon>
            <el-form-item label="属性名称" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="商品类型">
                <el-select v-model="ruleForm.productType" placeholder="请选择类型">
                    <el-option v-for="item in ppptype" :label='item.name' :value="item.name" />
                    <!-- <el-option label="Zone two" value="beijing" /> -->
                </el-select>
            </el-form-item>
            <el-form-item label="分类筛选样式">
                <el-radio-group v-model="ruleForm.filterType">
                    <el-radio :label="0">普通</el-radio>
                    <el-radio :label="1">颜色</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="能否进行检索">
                <el-radio-group v-model="ruleForm.searchType">
                    <el-radio :label="0">不需要检索</el-radio>
                    <el-radio :label="1">关键字检索</el-radio>
                    <el-radio :label="2">范围检索</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="商品属性关联">
                <el-radio-group v-model="ruleForm.relatedStatus">
                    <el-radio :label="0">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性是否可选">
                <el-radio-group v-model="ruleForm.selectType">
                    <el-radio :label="0">唯一</el-radio>
                    <el-radio :label="1">单选</el-radio>
                    <el-radio :label="2">复选</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值的录入方式">
                <el-radio-group v-model="ruleForm.inputType">
                    <el-radio :label="0">手工录入</el-radio>
                    <el-radio :label="1">从下面列表中选择</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值可选值列表">
                <el-input v-model="ruleForm.inputList" type="textarea" />
            </el-form-item>
            <el-form-item label="是否支持生动新增">
                <el-radio-group v-model="ruleForm.handAddStatus">
                    <el-radio :label="0">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序属性">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-form-item>
                <template #default="scope">
                    <el-button type="primary" @click="submitForm">Create</el-button>
                    <el-button @click="resetForm">Reset</el-button>
                </template>

            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref, } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import type { Ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as api from '../../request/api'
import type { productAttrItem, productAttrParams, productAttrRes } from '../../request/PmsProductAttributeCategoryController/index'
import Bread from "@/components/Bread.vue";
let route = useRoute()
let router=useRouter()
// console.log(route);
let cid = Number(route.query.cid)
let scid = Number(route.query.scid)
let typet = Number(route.query.type)
// console.log(cid);

const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive({
    // 属性名称
    name: '',
    // 商品类型
    productType: '',
    // 分类筛选样式
    filterType: 0,
    //能否进行检索
    searchType: 0,
    //商品属性关联
    relatedStatus: 1,
    //属性是否可选
    selectType: 0,
    //属性值的录入方式
    inputType: 0,
    //属性值可选值列表
    inputList: '',
    //是否支持生动新增
    handAddStatus: 1,
    //排序属性
    sort: 0,
    id: cid,
    productAttributeCategoryId: scid,
    type: 0,
})
//备份
let ruleFormnull = reactive({
    // 属性名称
    name: '',
    // 商品类型
    productType: '',
    // 分类筛选样式
    filterType: 0,
    //能否进行检索
    searchType: 0,
    //商品属性关联
    relatedStatus: 1,
    //属性是否可选
    selectType: 0,
    //属性值的录入方式
    inputType: 0,
    //属性值可选值列表
    inputList: '',
    //是否支持生动新增
    handAddStatus: 1,
    //排序属性
    sort: 0,
    id: cid,
    productAttributeCategoryId: 0,
    type: 0,
})
let ppptype = ref({}) as Ref<productAttrItem>

const rules = reactive<FormRules>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
    ],

})

// 请求
let aac = async () => {
    let cacc = await api.productAttr.getproductAttrList({
        pageNum: 1,
        pageSize: 100
    })
    ppptype.value = cacc.list
    // console.log(cacc);
}
aac()
// console.log(ppptype);


const submitForm = async () => {
    // console.log(ruleForm);
    if (typet === 0) {
        await api.productAttr.productAttributeadddata({...ruleForm})
        // console.log('添加');
        router.go(-1)
        
    } else {
        await api.productAttr.productAttributeupdate({ ...ruleForm })
        // console.log('修改');
        router.go(-1)
    }

}

const resetForm = () => {
    ruleForm = ruleFormnull
}



</script>


<style lang = "scss" scoped>
.el-card {
    max-width: 85%;
    margin: 0 auto;
}
.Bread {
  position: sticky;
  top: -100px;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #eee;
  // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding-left: 20px;
  box-sizing: border-box;
}
</style>